<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间平台跳跃</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background-color: #222;
            color: white;
        }
        
        #game-container {
            position: relative;
            width: 800px;
            height: 600px;
            margin: 20px auto;
            background-color: #333;
            overflow: hidden;
        }
        
        #level-select {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            z-index: 100;
            padding-top: 20px;
        }
        
        #level-buttons-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
            max-height: 80%;
            overflow-y: auto;
            padding: 20px;
            width: 90%;
        }
        
        .level-btn {
            margin: 5px;
            padding: 10px 15px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .level-btn:hover:not(:disabled) {
            background-color: #45a049;
            transform: scale(1.05);
        }
        
        .level-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* 保持原有样式不变 */
        #player {
            position: absolute;
            width: 40px;
            height: 60px;
            background-color: #3498db;
            border-radius: 10px;
            bottom: 50px;
            left: 50px;
            transition: transform 0.2s;
            z-index: 2;
        }
        
        #player .eye {
            position: absolute;
            top: 15px;
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
        }
        
        #player .eye-left {
            left: 30px;
        }
        
        #player .eye-right {
            left: 20px;
        }
        
        #player-time {
            position: absolute;
            width: auto;
            min-width: 80px;
            text-align: center;
            font-size: 28px;
            color: #fff;
            text-shadow: 
                2px 2px 4px rgba(0, 0, 0, 0.8),
                0 0 15px rgba(255, 255, 255, 0.5);
            font-weight: bold;
            pointer-events: none;
            z-index: 3;
            font-family: 'Arial Rounded MT Bold', 'Segoe UI', sans-serif;
            font-variant-numeric: tabular-nums;
            letter-spacing: 1px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            transition: transform 0.2s ease;
        }
        
        #player.left {
            transform: scaleX(-1);
        }
        
        .platform, .wall {
            position: absolute;
            background-color: #2ecc71;
            opacity: 0.3;
        }
        
        .platform {
            height: 20px;
        }
        
        .wall {
            width: 20px;
        }
        
        .platform.active, .wall.active {
            opacity: 1;
        }
        
        .platform::after, .wall::after {
            content: attr(data-time);
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            text-align: center;
            color: white;
        }
        
        #door {
            position: absolute;
            width: 60px;
            height: 100px;
            background: linear-gradient(to bottom, #3498db, #2980b9);
            border: 2px solid #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            bottom: 0;
        }
        
        #door::after {
            content: "终点";
            position: absolute;
            top: -30px;
            left: 0;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 18px;
            font-weight: bold;
        }
        
        .play-button {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: #f1c40f;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
        
        #controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: #aaa;
            font-size: 14px;
        }
        
        #exit-btn {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 5px 10px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            z-index: 50;
        }
        
        #exit-btn:hover {
            background-color: #c0392b;
        }
        
        #exit-menu {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.9);
            padding: 20px;
            border-radius: 5px;
            display: none;
            flex-direction: column;
            z-index: 200;
        }
        
        .exit-option {
            margin: 10px;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .exit-option:hover {
            background-color: #2980b9;
        }
        
        #victory-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
            opacity: 0;
            pointer-events: none;
            z-index: 10;
            transition: opacity 1s;
        }
        
        #victory-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 60px;
            font-weight: bold;
            color: #f1c40f;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
            opacity: 0;
            z-index: 11;
            transition: all 1s;
        }
        
        #game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 60px;
            font-weight: bold;
            color: #e74c3c;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
            opacity: 0;
            z-index: 11;
            transition: all 1s;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <button id="exit-btn">退出</button>
        <div id="exit-menu">
            <h2 style="text-align: center; margin-top: 0;">退出菜单</h2>
            <button class="exit-option" id="restart-btn">重新开始本关</button>
            <button class="exit-option" id="level-select-btn">返回选关界面</button>
        </div>
        
        <div id="level-select">
            <h1>选择关卡</h1>
            <div id="level-buttons-container"></div>
        </div>
        
        <div id="player">
            <div class="eye eye-left"></div>
            <div class="eye eye-right"></div>
        </div>
        <div id="player-time">10.00</div>
        
        <div id="victory-effect"></div>
        <div id="victory-text">通关成功！</div>
        <div id="game-over">时间耗尽！</div>
        
        <div id="controls">控制: A(左移) D(右移) K(跳跃/二段跳)</div>
    </div>

    <!-- 引入关卡数据 -->
    <script src="levels.js"></script>
    
    <script>
        // 游戏变量 (保持原有变量不变)
        const gameContainer = document.getElementById('game-container');
        const player = document.getElementById('player');
        const playerTime = document.getElementById('player-time');
        const levelSelect = document.getElementById('level-select');
        const exitBtn = document.getElementById('exit-btn');
        const exitMenu = document.getElementById('exit-menu');
        const restartBtn = document.getElementById('restart-btn');
        const levelSelectBtn = document.getElementById('level-select-btn');
        const victoryEffect = document.getElementById('victory-effect');
        const victoryText = document.getElementById('victory-text');
        const gameOverText = document.getElementById('game-over');
        const levelButtonsContainer = document.getElementById('level-buttons-container');
        
        let gameWidth = 24000;
        let gameHeight = 12000;
        let playerX = 50;
        let playerY = 50;
        let playerWidth = 40;
        let playerHeight = 60;
        let playerVelX = 0;
        let playerVelY = 0;
        let isJumping = false;
        let canDoubleJump = false;
        let currentTime = 10.00;
        let timeRunning = false;
        let gameRunning = false;
        let platforms = [];
        let walls = [];
        let door = null;
        let playButton = null;
        let currentLevel = 1;
        let gameLoop;
        let isOnPlatform = false;
        
        // 物理参数 (保持原有不变)
        const gravity = 0.6;
        const moveSpeed = 4.9;
        const jumpForce = 13;
        
        // 镜头滚动相关变量 (保持原有不变)
        let cameraX = 0;
        let cameraY = 0;
        const cameraSpeed = 2;
        const cameraMargin = 300;
        const screenWidth = gameContainer.offsetWidth;
        const screenHeight = gameContainer.offsetHeight;
        
        // 键盘状态 (保持原有不变)
        const keys = {
            a: false,
            d: false,
            k: false
        };
        
        // 初始化游戏 (保持原有逻辑不变)
        function initGame(level) {
            // 清除现有元素
            document.querySelectorAll('.platform').forEach(p => p.remove());
            document.querySelectorAll('.wall').forEach(w => w.remove());
            if (door) door.remove();
            if (playButton) playButton.remove();
            
            // 重置胜利和失败效果
            victoryEffect.style.opacity = 0;
            victoryText.style.opacity = 0;
            victoryText.style.transform = 'translate(-50%, -50%) scale(0.5)';
            gameOverText.style.opacity = 0;
            gameOverText.style.transform = 'translate(-50%, -50%) scale(0.5)';
            
            platforms = [];
            walls = [];
            timeRunning = false;
            isOnPlatform = false;
            
            playerX = 0;
            playerY = 0;
            playerVelX = 0;
            playerVelY = 0;
            isJumping = false;
            canDoubleJump = false;

            player.style.left = playerX + 'px';
            player.style.bottom = playerY + 'px';
            player.classList.remove('left');
            updatePlayerTimePosition();
            
            currentTime = 10.00;
            updateTimer();
            
            // 创建平台
            levels[level].platforms.forEach((plat, index) => {
                const platform = document.createElement('div');
                platform.className = 'platform';
                platform.style.left = plat.x + 'px';
                platform.style.bottom = plat.y + 'px';
                platform.style.width = plat.width + 'px';
                platform.dataset.time = plat.time;
                gameContainer.appendChild(platform);
                
                platforms.push({
                    element: platform,
                    x: plat.x,
                    y: plat.y,
                    width: plat.width,
                    time: plat.time
                });
            });
            
            // 创建墙壁
            levels[level].walls.forEach((wall, index) => {
                const wallElement = document.createElement('div');
                wallElement.className = 'wall';
                wallElement.style.left = wall.x + 'px';
                wallElement.style.bottom = wall.y + 'px';
                wallElement.style.height = wall.height + 'px';
                wallElement.dataset.time = wall.time;
                gameContainer.appendChild(wallElement);
                
                walls.push({
                    element: wallElement,
                    x: wall.x,
                    y: wall.y,
                    height: wall.height,
                    time: wall.time
                });
            });
            
            // 创建门
            door = document.createElement('div');
            door.id = 'door';
            door.style.left = levels[level].door.x + 'px';
            door.style.bottom = levels[level].door.y + 'px';
            gameContainer.appendChild(door);
            
            // 创建播放按钮道具
            playButton = document.createElement('div');
            playButton.className = 'play-button';
            playButton.style.left = levels[level].playButton.x + 'px';
            playButton.style.bottom = levels[level].playButton.y + 'px';
            gameContainer.appendChild(playButton);
            
            // 开始游戏循环
            if (gameLoop) clearInterval(gameLoop);
            gameRunning = true;
            gameLoop = setInterval(updateGame, 20);
        }
        
        // 更新游戏状态 (保持原有逻辑不变)
        function updateGame() {
            if (timeRunning) {
                currentTime -= 0.02;
                if (currentTime <= 0) {
                    currentTime = 0;
                    timeRunning = false;
                }
                updateTimer();
            }
            
            if (currentTime <= 0.01 && timeRunning) {
                clearInterval(gameLoop);
                gameRunning = false;
                showGameOver();
                return;
            }
            
            playerVelX = 0;
            if (keys.a) {
                playerVelX = -moveSpeed;
                player.classList.add('left');
            } else if (keys.d) {
                playerVelX = moveSpeed;
                player.classList.remove('left');
            }
            
            if (isJumping) {
                playerVelY -= gravity;
            } else {
                playerVelY = 0;
            }
            
            playerX += playerVelX;
            playerY += playerVelY;
            
            if (playerX < 0) playerX = 0;
            if (playerX > gameWidth - playerWidth) playerX = gameWidth - playerWidth;
            
            if (playerY > gameHeight - playerHeight) {
                playerY = gameHeight - playerHeight;
                playerVelY = 0;
            }
            
            if (playerY < 0) {
                playerY = 0;
                playerVelY = 0;
                isJumping = false;
                canDoubleJump = true;
            }
            
            if (playerX < cameraX + cameraMargin) {
                cameraX = playerX - cameraMargin;
            } else if (playerX > cameraX + screenWidth - cameraMargin) {
                cameraX = playerX - (screenWidth - cameraMargin);
            }
            if (playerY < cameraY + cameraMargin) {
                cameraY = playerY - cameraMargin;
            } else if (playerY > cameraY + screenHeight - cameraMargin) {
                cameraY = playerY - (screenHeight - cameraMargin);
            }
            
            cameraX = Math.max(0, Math.min(gameWidth - screenWidth, cameraX));
            cameraY = Math.max(0, Math.min(gameHeight - screenHeight, cameraY));
            
            player.style.left = (playerX - cameraX) + 'px';
            player.style.bottom = (playerY - cameraY) + 'px';
            updatePlayerTimePosition();
            
            platforms.forEach(platform => {
                platform.element.style.left = (platform.x - cameraX) + 'px';
                platform.element.style.bottom = (platform.y - cameraY) + 'px';
            });
            walls.forEach(wall => {
                wall.element.style.left = (wall.x - cameraX) + 'px';
                wall.element.style.bottom = (wall.y - cameraY) + 'px';
            });
            door.style.left = (levels[currentLevel].door.x - cameraX) + 'px';
            door.style.bottom = (levels[currentLevel].door.y - cameraY) + 'px';
            if (playButton) {
                playButton.style.left = (levels[currentLevel].playButton.x - cameraX) + 'px';
                playButton.style.bottom = (levels[currentLevel].playButton.y - cameraY) + 'px';
            }
            
            const currentSecond = Math.floor(currentTime);
            let standingOnPlatform = false;
            
            platforms.forEach(platform => {
                let isActive = false;
                const timeCondition = platform.time;
                
                if (timeCondition.endsWith("*")) {
                    const x = parseInt(timeCondition.slice(0, -1));
                    isActive = currentSecond !== x;
                } else if (timeCondition.endsWith("n")) {
                    const k = parseInt(timeCondition.slice(0, -1));
                    isActive = currentSecond % k === 0;
                } else if (timeCondition.startsWith("<=")) {
                    const x = parseInt(timeCondition.slice(2));
                    isActive = currentSecond <= x;
                } else if (timeCondition.startsWith(">=")) {
                    const x = parseInt(timeCondition.slice(2));
                    isActive = currentSecond >= x;
                } else {
                    isActive = currentSecond === parseInt(timeCondition);
                }
                
                platform.element.classList.toggle('active', isActive);
                
                if (isActive) {
                    if (playerX + playerWidth > platform.x &&
                        playerX < platform.x + platform.width &&
                        playerY <= platform.y + 20 &&
                        playerY >= platform.y &&
                        playerVelY <= 0) {
                        
                        playerY = platform.y + 20;
                        playerVelY = 0;
                        isJumping = false;
                        canDoubleJump = true;
                        standingOnPlatform = true;
                    }
                }
            });
            
            if (isOnPlatform && !standingOnPlatform) {
                isJumping = true;
            }
            isOnPlatform = standingOnPlatform;
            
            walls.forEach(wall => {
                let isActive = false;
                const timeCondition = wall.time;
                
                if (timeCondition.endsWith("*")) {
                    const x = parseInt(timeCondition.slice(0, -1));
                    isActive = currentSecond !== x;
                } else if (timeCondition.endsWith("n")) {
                    const k = parseInt(timeCondition.slice(0, -1));
                    isActive = currentSecond % k === 0;
                } else if (timeCondition.startsWith("<=")) {
                    const x = parseInt(timeCondition.slice(2));
                    isActive = currentSecond <= x;
                } else if (timeCondition.startsWith(">=")) {
                    const x = parseInt(timeCondition.slice(2));
                    isActive = currentSecond >= x;
                } else {
                    isActive = currentSecond === parseInt(timeCondition);
                }
                
                wall.element.classList.toggle('active', isActive);
                
                if (isActive) {
                    if (playerX + playerWidth > wall.x &&
                        playerX < wall.x + 20 &&
                        playerY + playerHeight > wall.y &&
                        playerY < wall.y + wall.height) {
                        if (playerVelX > 0) {
                            playerX = wall.x - playerWidth;
                        } else if (playerVelX < 0) {
                            playerX = wall.x + 20;
                        }
                    }
                    if (playerX + playerWidth > wall.x &&
                        playerX < wall.x + 20 &&
                        playerY <= wall.y + wall.height &&
                        playerY >= wall.y &&
                        playerVelY <= 0) {
                        playerY = wall.y + wall.height;
                        playerVelY = 0;
                        isJumping = false;
                        canDoubleJump = true;
                    }
                }
            });
            
            const doorCenterX = levels[currentLevel].door.x + door.offsetWidth / 2;
            const doorCenterY = levels[currentLevel].door.y + door.offsetHeight / 2;

            if (
                playerX + playerWidth / 2 >= doorCenterX - 30 &&
                playerX + playerWidth / 2 <= doorCenterX + 30 &&
                playerY + playerHeight / 2 >= doorCenterY - 40 &&
                playerY + playerHeight / 2 <= doorCenterY + 40
            ) {
                clearInterval(gameLoop);
                gameRunning = false;
                showVictory();
            }
            
            if (playButton && !timeRunning) {
                const btnLeft = parseInt(playButton.style.left);
                const btnBottom = parseInt(playButton.style.bottom);
                const btnWidth = 30;
                const btnHeight = 30;
                
                if (playerX + playerWidth > btnLeft &&
                    playerX < btnLeft + btnWidth &&
                    playerY < btnBottom + btnHeight &&
                    playerY + playerHeight > btnBottom) {
                    
                    timeRunning = true;
                    playButton.remove();
                    playButton = null;
                }
            }
        }
        
        // 显示通关效果 (保持原有逻辑不变)
        function showVictory() {
            victoryEffect.style.opacity = 1;
            victoryText.style.opacity = 1;
            victoryText.style.transform = 'translate(-50%, -50%) scale(1.2)';
            
            setTimeout(() => {
                victoryText.style.transform = 'translate(-50%, -50%) scale(1)';
            }, 500);
            
            setTimeout(() => {
                levelSelect.style.display = 'flex';
                victoryEffect.style.opacity = 0;
                victoryText.style.opacity = 0;
            }, 2000);
        }
        
        // 显示游戏失败效果 (保持原有逻辑不变)
        function showGameOver() {
            gameOverText.style.opacity = 1;
            gameOverText.style.transform = 'translate(-50%, -50%) scale(1.2)';
            
            setTimeout(() => {
                gameOverText.style.transform = 'translate(-50%, -50%) scale(1)';
            }, 500);
            
            setTimeout(() => {
                levelSelect.style.display = 'flex';
                gameOverText.style.opacity = 0;
            }, 2000);
        }
        
        // 更新时间显示位置 (保持原有逻辑不变)
        function updatePlayerTimePosition() {
            playerTime.style.left = (playerX - cameraX - 10) + 'px';
            playerTime.style.bottom = (playerY - cameraY + playerHeight + 5) + 'px';
        }
        
        // 更新时间显示内容 (保持原有逻辑不变)
        function updateTimer() {
            const displayTime = currentTime.toFixed(2);
            playerTime.textContent = displayTime;
            
            if (currentTime < 3) {
                playerTime.style.color = "#ff5555";
                playerTime.style.textShadow = "0 0 5px rgba(255, 0, 0, 0.7)";
            } else if (currentTime < 6) {
                playerTime.style.color = "#ffcc00";
                playerTime.style.textShadow = "0 0 5px rgba(255, 204, 0, 0.7)";
            } else {
                playerTime.style.color = "#ffffff";
                playerTime.style.textShadow = "1px 1px 3px rgba(0, 0, 0, 0.8)";
            }
        }
        
        // 键盘事件监听 (保持原有逻辑不变)
        document.addEventListener('keydown', (e) => {
            if (e.key.toLowerCase() === 'a') keys.a = true;
            if (e.key.toLowerCase() === 'd') keys.d = true;
            if (e.key.toLowerCase() === 'k') {
                if (!keys.k) {
                    if (!isJumping) {
                        playerVelY = jumpForce;
                        isJumping = true;
                        canDoubleJump = true;
                    } else if (canDoubleJump) {
                        playerVelY = jumpForce * 0.8;
                        canDoubleJump = false;
                    }
                }
                keys.k = true;
            }
            if (e.key === 'Escape') {
                if (gameRunning) {
                    initGame(currentLevel);
                }
            }
        });
        
        document.addEventListener('keyup', (e) => {
            if (e.key.toLowerCase() === 'a') keys.a = false;
            if (e.key.toLowerCase() === 'd') keys.d = false;
            if (e.key.toLowerCase() === 'k') keys.k = false;
        });
        
        // 生成24个关卡按钮
        function generateLevelButtons() {
            for (let i = 1; i <= 24; i++) {
                const btn = document.createElement('button');
                btn.className = 'level-btn';
                btn.dataset.level = i;
                btn.textContent = `第${i}关`;
                
                // 禁用未实现的关卡
                if (!levels[i]) {
                    btn.disabled = true;
                    btn.style.opacity = '0.5';
                }
                
                btn.addEventListener('click', () => {
                    const level = parseInt(btn.dataset.level);
                    if (levels[level]) {
                        currentLevel = level;
                        levelSelect.style.display = 'none';
                        initGame(level);
                    }
                });
                
                levelButtonsContainer.appendChild(btn);
            }
        }
        
        // 退出按钮事件 (保持原有逻辑不变)
        exitBtn.addEventListener('click', () => {
            exitMenu.style.display = 'flex';
            if (gameLoop) clearInterval(gameLoop);
            gameRunning = false;
        });
        
        // 重新开始本关 (保持原有逻辑不变)
        restartBtn.addEventListener('click', () => {
            exitMenu.style.display = 'none';
            initGame(currentLevel);
        });
        
        // 返回选关界面 (保持原有逻辑不变)
        levelSelectBtn.addEventListener('click', () => {
            exitMenu.style.display = 'none';
            levelSelect.style.display = 'flex';
        });
        
        // 初始化关卡选择界面
        generateLevelButtons();
        levelSelect.style.display = 'flex';
    </script>
</body>
</html>